<style scoped>
	#login{
		box-sizing: border-box;
		padding-top:110px;
		width:100%;
		height:100%;
		background-color:#373447;
	}
	.main{
		margin-right:auto;
		margin-left:auto;
		width:548px;
		height:425px;
		border-radius:10px;
		box-sizing:border-box;
		background-color:rgba(51,58,77,.95);
	}
	h1{
		line-height:116px;
		color:#fff;
		font-size:2rem;
		text-align: center;
	}
	.content{
		height:241px;
	}
	.form > label{
		margin-top:20px;
		margin-left:41px;
		margin-right: 41px;
		line-height:40px;
		display:block;
		height:41px;
		border-bottom:1px solid #60606c;
	}
	.iconfont{
		font-size:24px;
		color:#90909c;
	}
	.form > label > input{
		background-color:transparent;
		border:none;
		margin-left:10px;
		width:calc(100% - 45px);
		font-size:20px;
		color:#b1b2b7;
		line-height:30px;
		outline:none;

	}
	label > input:active{
		border:none;
	}
	.total{
		height:110px;
		line-height:110px;
	}
	.total > label >input{
		display:none;
	}
	.total > label{
		vertical-align: middle;
		margin-left:41px;
	}
	.total > label > .button{
		display: inline-block;
		box-sizing: border-box;
        padding: 2px;
        background-color: transparent;
        cursor: pointer;
        width:18px;
        height:18px;
        border:1px solid #60606c;
        vertical-align: middle;
        background-clip: content-box;
        transition: background-color .3s;
	}
	.total > label >input:checked ~ .button{
        background-color: #34aa8a;
    }
	.total > label > .remember{
		display:inline-block;
		font-size:16px;
		margin-left:10px;
		color:#b1aeb5;
		vertical-align: middle;
	}
	.total > a{
		font-size:16px;
		color:#b1aeb5;
		margin-right:41px;
		float:right;
		text-decoration: none;
		transition: color .3s;		
	}
	.total > a:hover{
		cursor:pointer;
		color:#e44911;
	}
	button{
		display:block;
		width:100%;
		line-height:68px;
		font-size:22px;
		color:#fbfbf9;
		background-color:rgba(52,170,138,.9);
		border:none;
		border-radius:0 0 10px 10px;
		transition: background-color .3s;
		outline:none;
	}
	button:hover{
		cursor: pointer;
		background-color:rgba(52,170,138,1);
	}

	.vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;
        .ivu-modal{
            top: 0;
        }
    }
</style>

<template>
	<div id='login'>
		<div class='main'>
			<h1>MyBlog Admin</h1>	
			<div class='content'>
				<div class='form'>
					<label>
						<i class="iconfont">&#xe736;</i>
						<input type='text' placeholder='用户名' name='user' v-model='userName'>
					</label>
					<label>
						<i class="iconfont">&#xe6c0;</i>
						<input type='password' placeholder='密码'  name='password' v-model='password'>
					</label>
				</div>
				<div class='total'>
					<label>
						<input type='checkbox' value='remember' v-model='rememberPassword'>
						<span class='button'></span>
						<span class='remember'>记住密码</span>
					</label>
					<a >忘记密码？</a>
				</div>
			</div>
			<button @click="login()">登录</button>
		</div>
	</div>
</template>

<script>
import '../assets/css/iconfont.css'
export default {
  name: 'HelloWorld',
  data () {
    return {
      userName:'',
      password:'',
      rememberPassword:''
    }
  },
  mounted(){
  	if(this.$cookie.get('sessionID')){
  		const that = this;
        this.$http.get(
        	that.surl+'checkLogin?sessionID='+that.$cookie.get('sessionID')
        )
          .then(function (response) {
          	console.log(response.data);
          	if(response.data===true){
			  that.$router.push('/admin/home');
          	}
          })
          .catch(function (error) {
            that.$router.push('/admin/404');
          });
  	}
  },
  methods:{
  	login () {
  		if(this.user!==''&&this.password!==''){
	  		const that = this;
	  		this.$http.get(	
	        	that.surl+'login?userName='+that.userName+'&password='+that.password
	        )
	        .then(function (response) {
	          	if(response.data){
	          		if(that.rememberPassword){
	          			that.$cookie.set('sessionID',response.data, { expires: '7D' });
	          		}else{
	          			that.$cookie.set('sessionID',response.data);
	          		}
				    that.$router.push('/admin/home');
	          	}else{
	          		const title = '用户名或密码错误';
			    	const content = '<p>请输入正确的用户名和密码</p>';
				    that.$Modal.error({
					    title: title,
					    content: content
				    });
	          	}
	          })
            .catch(function (err) {
            	that.$router.push('/admin/404');
            });
	    }else{
	    	const title = '信息不完整';
	    	const content = '<p>请输入正确的用户名和密码</p>';
		    this.$Modal.warning({
			    title: title,
			    content: content
		    });
	    }
  	}
  }
}
</script>

